<template>
    <div class="page">
        <div class="flexWrap pageTop">
            <div class="flexWrap filter-bar">
                <img src="../../assets/img/filter.png" />
                <span class="title">筛选：</span>
            </div>
            <el-input style="width: 140px; transform:scale(0.9)" size="mini" clearable placeholder="需求名称" v-model="filter.keyword" @change="toFilter" />
            <el-select clearable class="mini-el" style="width: 160px" size="small" v-model="filter.status" placeholder="选择状态"  @change="toFilter">
                <el-option v-for="s in statusAry" :key=s.v :label=s.n :value=s.v />
            </el-select>
            <el-select clearable class="mini-el" style="width: 160px" size="small" v-model="filter.p" placeholder="选择优先级"  @change="toFilter">
                <el-option v-for="s in pAry" :key=s.v :label=s.n :value=s.v />
            </el-select>
            <el-checkbox size="mini" style="transform:scale(0.9);margin: 5px 20px 0 0" v-model="filter.onlyMe" @change="toFilter">只看跟我相关</el-checkbox>

            <el-button type="" plain size="mini" style="transform:scale(0.8)" icon="el-icon-circle-plus" @click="toEdit()">新增</el-button>
            <el-button type="" plain size="mini" style="transform:scale(0.8)" icon="el-icon-refresh" @click="toFilter">刷新</el-button>
        </div>
        <div class="pageCenter">
            <el-table :data="list" stripe size="medium"
                      :cell-style="{padding:'10px 0'}" @row-click="toEdit" @sort-change="toSort">
                <el-table-column prop="id" label="ID" width="100" sortable />
                <el-table-column prop="title" label="需求标题" min-width="140" align="left" sortable />
                <el-table-column label="任务状态" width="200" align="left">
                    <template slot-scope="scope">
                        <span style="font-size: 11px;">{{scope.row.jobDesc}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="projectName" label="所属项目" width="180" align="left" />
                <el-table-column prop="userNames" label="参与人" width="220" />
                <el-table-column label="状态" width="100" sortable>
                    <template slot-scope="scope">
                        <template v-if="scope.row.status == 1">
                            <el-tag type="info">待确认</el-tag>
                        </template>
                        <template v-else-if="scope.row.status == 20">
                            <el-tag type="">开发中</el-tag>
                        </template>
                        <template v-else-if="scope.row.status == 30">
                            <el-tag type="">测试中</el-tag>
                        </template>
                        <template v-else-if="scope.row.status == 100">
                            <el-tag type="success">已完成</el-tag>
                        </template>
                        <template v-else-if="scope.row.status == 110">
                            <el-tag type="success">已上线</el-tag>
                        </template>
                        <template v-else>
                            <el-tag type="info">废弃</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="优先级" width="100" sortable>
                    <template slot-scope="scope">
                        <template v-if="scope.row.p == 1">
                            <el-tag type="danger">P0紧急</el-tag>
                        </template>
                        <template v-else-if="scope.row.p == 2">
                            <el-tag type="warning">P1高</el-tag>
                        </template>
                        <template v-else-if="scope.row.p == 3">
                            <el-tag>P2一般</el-tag>
                        </template>
                        <template v-else>
                            <el-tag type="info">P3低</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="deadlineStr" label="截止日期" width="120" sortable />
                <el-table-column prop="doneAtStr" label="完成日期" width="120" sortable />
            </el-table>
        </div>
        <div class="pageBottom flexWrapCenter">
            <el-pagination small @current-change="tblCurPageChanged"
                           layout="total, prev, pager, next, jumper"
                           :page-size="tbl.size" :total="tbl.total" />
        </div>

        <!--详情-->
        <el-drawer
            title="详情"
            :size=1400
            :visible.sync="chat.show"
            :with-header="false"
            @close="fetchList"
             append-to-body border :show-title=false :show-close=false
        >
            <demand v-if="chat.show" :info="chat.info" @complete="chat.show = false;" />
        </el-drawer>
    </div>
</template>

<script>
import Demand from '@/views/demand/demand'
export default {
    data: function(){
        return {
            me:{},
            userAry:[],
            projectAry:[],
            statusAry: [{n:'全部',v:-100},{n:'确认中',v:1},{n:'开发中',v:20},{n:'测试中',v:30},{n:'已完成',v:100},{n:'已废弃',v:-1}],
            pAry: [{n:'P0紧急',v:1},{n:'P1高',v:2},{n:'P2普通',v:3},{n:'P3低',v:4}],
            filter:{
                keyword: "",
                role:"",
                status:'',
                p: '',
                onlyMe:false,
            },

            tbl:{total:0, size:15, curr:1},
            list:[],

            edit:{show:false, info:{}},
            chat:{show:false, info:{}},
        }
    },
    components: {
        Demand
    },
    created() {
        this.userAry = this.consts.users()
        this.projectAry = this.consts.projects()
        this.fetchList();
    },
    methods: {
        /**************** 动作 ****************/
        tblCurPageChanged(v) {
            this.tbl.curr = v;
            this.fetchList();
        },
        toFilter() {
            this.tbl.sort = ''
            if (this.$refs.filterTable && this.$refs.filterTable.clearFilter) this.$refs.filterTable.clearFilter()
            this.tbl.curr = 1
            this.fetchList()
        },
        toSort(e) {
            let keys = {id:"id", p:"p", deadlineStr:"deadline",status:"status",doneAtStr:"doneAt"}
            this.tbl.sort = ""
            if (e.order && e.prop) {
                if (e.order === 'ascending') {
                    this.tbl.sort = keys[e.prop] + "__" + "asc"
                } else if (e.order === 'descending') {
                    this.tbl.sort = keys[e.prop] + "__" + "desc"
                }
            }

            this.fetchList()
        },
        toEdit(row) {
            if (row && row.id) {
                this.chat = {show:true, info: {id:row.id, editable:true}}
            } else {
                this.chat = {show:true, info:{id:0}}
            }
        },

        /**************** 接口 ****************/
        fetchList() {
            let params = {
                pageSize:this.tbl.size, pageNumber:this.tbl.curr, sort:this.tbl.sort,
                status:this.filter.status, keyword:this.filter.keyword, p:this.filter.p,
                onlyMe:this.filter.onlyMe
            }
            this.request.get({
                url: "demand.list",
                data: params
            }).then(res => {
                this.list = res.result || [];
                this.list.forEach(t => {
                    this.format.demand(t)
                })
                this.tbl.total = (res && res.totalCount) ? res.totalCount : this.list.length;
            },res => {
                this.$message.error(res.msg || "获取数据失败~");
            })
        }
    }
}
</script>

<style scoped>
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #eeeeee;
}
</style>
